<template>
  <!--直播-->
  <div>
    <div id="player"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        playerJs: 'https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js',
        uid: '98f95c35af',
        vid: '2096703'
      };
    },

    mounted() {
      this.loadPlayerScript(this.loadPlayer);
    },

    methods: {
      loadPlayerScript(callback) {
        if (!window.polyvLivePlayer) {
          const myScript = document.createElement('script');
          myScript.setAttribute('src', this.playerJs);
          myScript.onload = callback;
          document.body.appendChild(myScript);
        } else {
          callback();
        }
      },

      loadPlayer() {
        const polyvLivePlayer = window.polyvLivePlayer;
        this.player = polyvLivePlayer({
          wrap: '#player',
          width: '100%',
          height: 300,
          uid: this.uid,
          vid: this.vid,
        });
      }
    },
    destroyed() {
      if (this.player) {
        this.player.destroy();
      }
    }
  };
</script>
<style scoped>
  #player {
    margin: 20px 0;
  }
</style>
